<template>
  <div class="prologue-container">
    <!-- 引导页 -->
    <div v-if="isShow" class="prologue-box">
      <img src="@/style/images/prologue1.png" alt="pp" />
    </div>
    <!-- 首次使用app的引导页 -->
    <van-swipe indicator-color="#2561ef" :loop="false" v-else>
      <van-swipe-item>
        <img src="@/style/images/shuju.png" alt="xx" />
        <h1>可视化数据</h1>
        <p>数据实时共享，随时随地查阅</p>
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/style/images/zhineng.png" alt="xx" />
        <h1>可智能操控</h1>
        <p>点击即可操作，智能办公管家</p>
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/style/images/shenpi.jpg" alt="xx" />
        <h1>方便快捷简单</h1>
        <p>操作简单易懂，随身携带办公</p>
        <van-button type="info" @click="onSubmit">立即体验</van-button>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>


<script>
import { getAutoToken } from "@/common/localStoreToken";
import { autoLoginApi, userRoleApi } from "@/api/userApi";
import { getPhone } from "../../common/phoneStore";
export default {
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    onSubmit() {
      this.$router.replace("/login");
    }
  },
  async created() {
    let phone = getPhone(); //获取电话号码token
    if (!phone) return (this.isShow = false); //判断是否首次登录
    let token = getAutoToken(); // 获取自动登录token

    if (!token) return this.$router.replace("/login");
    this.$store.commit('common/SAVE_TOKEN',token)
    let result = await autoLoginApi(token);
    if (result.code !== 200) {
      this.$router.replace("/login");
      return;
    }
    console.log("result", result);
    let roleList = await userRoleApi(result.data.role);
    if (roleList.code !== 200) {
      this.$router.replace("/login");
      return;
    }
    

    this.$store.commit("common/SAVE_USERINFO", result.data); //存储用户信息
    this.$store.commit("common/SAVE_USERROLE", roleList.data); //存储角色信息(权限)
    this.$router.push("/home");
  }
};
</script>

<style lang="less" scoped >
@import "@/style/index.less";
.prologue-container {
  display: block;
  width: 100%;
  height: 100%;
  //引导页
  .prologue-box {
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }

  //首次进入引导页
  .van-swipe {
    width: 100%;
    height: 100vh;
    .van-swipe-item {
      text-align: center;
      position: relative;
      //图片
      img {
        margin-top: 6vh;
        width: 80vw;
        height: 50vh;
      }
      //标题
      h1 {
        margin: 0;
        font-size: 20px;
      }
      //描述
      p {
        font-size: 16px;
      }
      //立即体验按钮
      .van-button {
        display: block;
        width: 80%;
        height: 40px;
        position: absolute;
        bottom: 10vh;
        margin: auto;
        left: 50%;
        transform: translate(-50%);
      }
    }
    /deep/ .van-swipe__indicators {
      bottom: 26vh;
      .van-swipe__indicator {
        width: 40px;
        height: 10px;
        background-color: @c7;
        // opacity: 0.8;
        -webkit-transition: opacity 0.2s, background-color 0.2s;
        transition: opacity 0.2s, background-color 0.2s;
        border-radius: 10px;
      }
      .van-swipe__indicator--active {
        background-color: @c1;
      }
    }
  }
}
</style>